<!DOCTYPE html>
<html>

<head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 性能优化：预加载关键资源 -->
    <link rel="preload" href="{{cdn}}/static/v5/example/css/materialdesignicons.min.css" as="style">
    <link rel="preload" href="{{cdn}}/static/v5/example/css/bootstrap.min.css" as="style">
    <link rel="preload" href="{{cdn}}/static/v5/example/css/style.min.css" as="style">
    <link rel="preload" href="{{cdn}}/static/v5/js/jquery.min.js" as="script">
    
    <!-- 基础样式库 -->
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/example/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/example/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/example/css/style.min.css">
    <!-- 功能插件样式 -->
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/js/jquery-confirm/jquery-confirm.min.css">

    <style>
        #info {  
            margin-left: 10px; /* 这里设置向右移动的像素值 */
        }
        #myChart {  
            height: 400px !important;  
        }
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .dis_contents {
            display: contents;
        }

        #v-pills-tabContent i {
            text-align: center;
            margin: 0;
            vertical-align: middle;
            font-size: 24px;
            border: 1px solid #eceeef;
            width: 50px;
            height: 50px;
            line-height: 50px;
            margin-right: 12px;
            color: rgba(43, 61, 81, 0.7);
            border-radius: 3px;
            display: inline-block;
            transition: all 0.5s ease-out;
            box-shadow: 2px 2px 1px #f5f8fa;
        }

        /* 背景动画 */
        .wave {
            background-color: #f9fafb;
            overflow: hidden;
            position: relative;
        }

        .wave > div {
            z-index: 1;
        }

        .wave:before {
            content: ' ';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ffffff;
            z-index: -1;
        }

        .wave:after {
            content: ' ';
            width: 1000px;
            height: 1025px;
            position: absolute;
            bottom: 65%;
            left: -250px;
            border-radius: 35%;
            background: white;
            z-index: 0;
        }

        .wave:after {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .wave-animate:after {
            -webkit-animation: animate-wave 15s infinite linear;
            animation: animate-wave 15s infinite linear;
        }

        .wave-animate-slower:after {
            -webkit-animation: animate-wave 30s infinite linear;
            animation: animate-wave 30s infinite linear;
        }

        .wave-animate-slow:after {
            -webkit-animation: animate-wave 25s infinite linear;
            animation: animate-wave 25s infinite linear;
        }

        .wave-animate-fast:after {
            -webkit-animation: animate-wave 10s infinite linear;
            animation: animate-wave 10s infinite linear;
        }

        .wave-animate-faster:after {
            -webkit-animation: animate-wave 5s infinite linear;
            animation: animate-wave 5s infinite linear;
        }

        .wave.wave-primary {
            background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
        }

        .wave.wave-primary .svg-icon svg g [fill] {
            fill: var(--bs-primary);
        }

        .wave.wave-secondary {
            background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
        }

        .wave.wave-secondary .svg-icon svg g [fill] {
            fill: var(--bs-secondary);
        }

        .wave.wave-success {
            background-color: rgba(var(--bs-success-rgb), 0.1) !important;
        }

        .wave.wave-success .svg-icon svg g [fill] {
            fill: var(--bs-success);
        }

        .wave.wave-info {
            background-color: rgba(var(--bs-info-rgb), 0.1) !important;
        }

        .wave.wave-info .svg-icon svg g [fill] {
            fill: var(--bs-info);
        }

        .wave.wave-warning {
            background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
        }

        .wave.wave-warning .svg-icon svg g [fill] {
            fill: var(--bs-warning);
        }

        .wave.wave-danger {
            background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
        }

        .wave.wave-danger .svg-icon svg g [fill] {
            fill: var(--bs-danger);
        }

        .wave.wave-light {
            background-color: rgba(var(--bs-light-rgb), 0.1) !important;
        }

        .wave.wave-light .svg-icon svg g [fill] {
            fill: var(--bs-light);
        }

        .wave.wave-dark {
            background-color: rgba(var(--bs-dark-rgb), 0.1) !important;
        }

        .wave.wave-dark .svg-icon svg g [fill] {
            fill: var(--bs-dark);
        }

        .wave.wave-white {
            background-color: rgba(var(--bs-white-rgb), 0.1) !important;
        }

        .wave.wave-white .svg-icon svg g [fill] {
            fill: var(--bs-white);
        }

        @-webkit-keyframes animate-wave {
            from {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes animate-wave {
            from {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
<!-- 栅格 -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-9">
            <!-- 数据面板开始 -->
            <div class="row">
                <div class="col-md-4">
                    <!--begin::Iconbox-->
                    <div class="card wave wave-animate-slow wave-primary">
                        <div class="card-body position-relative">

                            <a href="#!" class="text-dark fs-4"><svg class="icon"  style="font-size: 25px;" aria-hidden="true"><use xlink:href="#icon-Webxing"></use></svg>&nbsp;web 空间</a><span class="text-dark fs-4" style="float: right; ">
                                <span id="web_used_space">0M</span>/<label id="web_size">{{web_size}}</label>M
                            </span>
                            <div class="progress mb-1" style="height: 5px;">
                                <div class="progress-bar" role="progressbar" id="progressbar" style="width: 0%" aria-valuenow="0"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="flex-box">
                                <p class="text-muted mb-0" id="bytes_used_space">已用0%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card wave wave-animate wave-danger">
                        <div class="card-body position-relative">
                            <a href="#!" class="text-dark fs-4"> <svg class="icon"  style="font-size: 25px;" aria-hidden="true"><use xlink:href="#icon-yunshujuku"></use></svg>&nbsp;SQL空间</a><span class="text-dark fs-4" style="float: right; ">
                            <span id="sql_used_space1">0M</span>/<label id="sql_size">{{sql_size}}</label>M
                        </span>

                            <div class="progress mb-1" style="height: 5px;">
                                <div class="progress-bar" role="progressbar" id="sqlprogressbar" style="width: 0%" aria-valuenow="0"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="flex-box">
                                <p class="text-muted mb-0" id="sqlbytes_used_space">已用0%</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card wave wave-animate-fast wave-info">
                        <div class="card-body position-relative">
                            <a href="#!" class="text-dark fs-4"><svg class="icon"  style="font-size: 25px;" aria-hidden="true"><use xlink:href="#icon-liuliang"></use></svg>&nbsp;本月流量</a><span  class="text-dark fs-4" style="float: right;">
                                <span id="traffic">0M</span>/<label id="traffic_size">{{traffic_size}}</label>M
                            </span>
                            <div class="progress mb-1" style="height: 5px;">
                                <div class="progress-bar" role="progressbar" id="trafficprogressbar" style="width: 0%" aria-valuenow="0"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="flex-box">
                                <p class="text-muted mb-0" id="traffic_used_space">已用0%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 数据面板结束 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">快捷菜单</div>
                        </div>
                        <div class="card-body">

                            <ul id="myTabs" class="nav nav-tabs" role="tablist">
                                <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab"
                                                        href="#attention-seekers">基本功能</a></li>
                                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab"
                                                        href="#bouncing-entrances">高级</a></li>

                            </ul>
                            <div id="v-pills-tabContent" class="tab-content">
                                <div class="tab-pane fade show active" id="attention-seekers">
                                    <div class="row">

                                        <div class="col-md-6 col-lg-3 col-xl-3 col-6 div_margin ">
                                            <a href="#!" class="js-create-tab" data-title="域名绑定"
                                               data-url="/dns/">
                                                <i ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_diqiuyi"></use></svg></i> <span style="color:#333333;">域名绑定</span>
                                            </a>
                                        </div>
                                        <div
                                                class="col-md-6 col-lg-3 col-xl-3 col-6 div_margin ">
                                            <a href="#!" class="js-create-tab" data-title="默认文档"
                                               data-url="/GetIndex/">
                                               <i ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-moren-_wendang"></use></svg></i> <span
                                                    style="color:#333333;">默认文档</span>
                                            </a>
                                        </div>
                                        <div class="col-md-6 col-lg-3 col-xl-3 col-6 div_margin ">
                                            <a href="#!" class="js-create-tab" data-title="伪静态"
                                               data-url="/GetRewriteList/">
                                               <i ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-weijingtai"></use></svg></i> <span style="color:#333333;">伪静态</span>
                                            </a>
                                        </div>
                                        

                                        <div class="col-md-6 col-lg-3 col-xl-3 col-6 div_margin ">
                                            <a href="#!" class="js-create-tab" data-title="运行目录"
                                               data-url="/switch_directory/">
                                               <i ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-mulu"></use></svg></i> <span
                                                    style="color:#333333;">运行目录</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bouncing-entrances">
                                    <div class="row">
                                        <div class="col-md-6 col-lg-3 col-xl-3 col-6 div_margin ">
                                            <a href="#!" class="js-create-tab" data-title="SSL" data-url="/ssl/">
                                                <i ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-anquan-wangzhi"></use></svg></i> <span
                                                    style="color:#333333;">SSL</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 主机负载开始 -->
            <div class="row">
              
                <div class="col-12">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <div ><i ><svg class="icon"  style="font-size: 23px;" aria-hidden="true"><use xlink:href="#icon-chuangjianmulu"></use></svg></i> &nbsp;主机负载状态</div>
                                </div>
                                <div class="card-body">
                                    <canvas id="myChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主机负载结束 -->
        </div>

        <div class="col-md-3">
            <!-- 网站信息 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div><svg class="icon"  style="font-size: 25px;" aria-hidden="true"><use xlink:href="#icon-yonghu"></use></svg>&nbsp;基本信息</div>
                        </div>
                        <div class="card-body" id="info">
                            <p>主机名称：&nbsp;{{host_name}}</p>
                            <p>用户名称：&nbsp;{{user_name}}</p>
                            <p>当前版本:&nbsp;v1.0</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end -->
            <!-- 系统环境 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div><svg class="icon"  style="font-size: 30px;" aria-hidden="true"><use xlink:href="#icon-wendang"></use></svg>&nbsp;系统环境</div>
                        </div>
                        <div class="card-body" id="info">
                         <p id="linux"></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end -->
            <!-- 网站信息 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div><svg class="icon"  style="font-size: 25px;" aria-hidden="true"><use xlink:href="#icon-Webxing"></use></svg>&nbsp;数据库信息</div>
                        </div>
                        <div class="card-body" id="info">
                            <p>数据库地址:&nbsp;localhost</p>
                            <p>数据库端口:&nbsp;3306</p>
                            <p>数据库名称:&nbsp;{{sql_name}}</p>
                            <p>数据库账号:&nbsp;{{sql_user}}</p>
                            <p style="display: none;" id="sqlpwd" >{{sql_pwd}}</p>
                            <p id="text">数据库密码: ******* <button style=" border: 1px solid transparent; background-color: transparent;" onclick="showPassword()"><span class="mdi mdi-eye-refresh-outline"></span></button></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- end -->
             
            <!-- 网站信息 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div><svg class="icon"  style="font-size: 30px;" aria-hidden="true"><use xlink:href="#icon-php"></use></svg>&nbsp;切换PHP版本</div><span id="#icon-php"></span>
                        </div>
                        <div class="card-body">
                            <select class="form-select" id="php" onchange="SetPHPVersion()" aria-label="切换php">                            
                            </select>
                        </div>
                        <div class="card-header" id="phpstatus">
                            
                            
                        </div>
                    </div>
                
                        
                   
                </div>
            </div>
            <!-- end -->
        </div>
    </div>
</div>
<!-- 正确引用jQuery -->
<script src="{{cdn}}/static/v5/js/jquery.min.js"></script>
<!-- 使用主框架中的jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script type="text/javascript" src="{{cdn}}/static/v5/example/js/popper.min.js"></script>
<script type="text/javascript" src="{{cdn}}/static/v5/example/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{cdn}}/static/v5/example/js/layer/layer_fixed.js"></script>
<script type="text/javascript" src="{{cdn}}/static/v5/example/js/main.min.js"></script>
<!-- 弹框 -->
<script src="{{cdn}}/static/js/iconfont.js"></script>
<script type="text/javascript" src="{{cdn}}/static/js/main.js"></script>

<!--对话框插件js-->
<!-- <script type="text/javascript" src="{{cdn}}/static/v5/example/js/jquery-confirm/jquery-confirm-fixed.js"></script> -->
<script type="text/javascript"></script>
<script src="{{cdn}}/static/v5/example/js/layer/layer.js"></script>

<!-- 性能优化：异步加载非关键资源 -->
<script src="{{cdn}}/static/js/performance-config.js" async></script>
<script src="{{cdn}}/static/js/resource-loader.js" async></script>

</body>

</html>